<route lang="json5" type="page">
{
  layout: "page",
  style: {
    navigationBarTitleText: "个人信息",
  },
}
</route>

<template>
  <wd-toast />
  <view class="my-issue">
    <button
      class="my-issue-btn"
      v-for="item in issue"
      :key="item.name"
      @click="handleClick(item.openType)"
    >
      <uni-section class="my-issue-item" :title="item.name">
        <template v-slot:decoration>
          <view class="my-issue-icon">
            <uni-icons :type="item.type" size="20" color="#4096de"></uni-icons>
          </view>
        </template>
        <template v-slot:right>
          <view class="my-issue-icon">
            <uni-icons type="right" size="20"></uni-icons>
          </view>
        </template>
      </uni-section>
    </button>
    <uni-popup
      ref="popupNickName"
      type="center"
      background-color="#fff"
      border-radius="20px 20px 20px 20px"
      class="my-nick-pop"
    >
      <view class="my-nick-pop-title">修改昵称</view>
      <view class="my-nick-pop-input">
        <input
          type="nickname"
          :value="userInfo.nickname"
          placeholder="请输入昵称"
          @input="nickChange"
          @blur="nickChange"
        />
      </view>
      <view class="my-nick-pop-btn">
        <button @click="cancelUserInfo">取消</button>
        <button class="my-nick-pop-btn-sure" @click="changeUserInfo">
          确定
        </button>
      </view>
    </uni-popup>
    <uni-popup
      ref="popupSignature"
      type="center"
      background-color="#fff"
      border-radius="20px 20px 20px 20px"
      class="my-nick-pop"
    >
      <view class="my-nick-pop-title">修改签名</view>
      <view class="my-nick-pop-input">
        <input
          type="nickname"
          :value="userInfo.personalizedSignature"
          placeholder="请输入昵称"
          @input="signatureChange"
          @blur="signatureChange"
        />
      </view>
      <view class="my-nick-pop-btn">
        <button @click="canceSignature">取消</button>
        <button class="my-nick-pop-btn-sure" @click="changeSignature">
          确定
        </button>
      </view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { wxUserUpdate } from "@/service/my";
import { useToast } from "wot-design-uni";
import { useUserStore } from "@/store";
import { storeToRefs } from "pinia";
const VITE_UPLOAD_BASEURL = import.meta.env.VITE_UPLOAD_BASEURL;
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const toast = useToast();
const popupNickName = ref<any>(null);
const nick = ref("");
const popupSignature = ref<any>(null);
const signature = ref("");
const issue = [
  {
    name: "修改昵称",
    type: "person-filled",
    openType: "chooseNickname",
  },
  {
    name: "修改头像",
    type: "camera-filled",
    openType: "chooseAvatar",
  },
  {
    name: "修改签名",
    type: "chatbubble-filled",
    openType: "chooseDescription",
  },
  {
    name: "修改背景图",
    type: "camera-filled",
    openType: "chooseBackgroundImage",
  },
];
const handleClick = (openType) => {
  switch (openType) {
    case "chooseNickname":
      chooseNickname();
      break;
    case "chooseAvatar":
      chooseavatar();
      break;
    case "chooseDescription":
      chooseDescription();
      break;
    case "chooseBackgroundImage":
      chooseBackgroundImage();
      break;
  }
};
// 修改昵称
const chooseNickname = () => {
  popupNickName.value.open("center");
};
const cancelUserInfo = () => {
  popupNickName.value.close();
};
const nickChange = (v: any) => {
  nick.value = v?.detail?.value;
};
const changeUserInfo = async () => {
  const res: any = await wxUserUpdate({
    id: userInfo.value.account,
    nickname: nick.value,
  });
  userStore.setUserInfo({ ...userInfo.value, nickname: nick.value });
  toast.show("操作成功");
  popupNickName.value.close();
};
// 修改签名
const chooseDescription = () => {
  popupSignature.value.open("center");
};
const canceSignature = () => {
  popupSignature.value.close();
};
const signatureChange = (v: any) => {
  signature.value = v?.detail?.value;
};
const changeSignature = async () => {
  const res: any = await wxUserUpdate({
    id: userInfo.value.account,
    personalizedSignature: signature.value,
  });
  userStore.setUserInfo({
    ...userInfo.value,
    personalizedSignature: signature.value,
  });
  toast.show("操作成功");
  popupNickName.value.close();
};
// 修改头像
const chooseavatar = () => {
  chooseImage('avatarUrl')
};
const chooseBackgroundImage = () => {
  chooseImage('bgImg')
};
const chooseImage = (val:string) => {
  uni.chooseMedia({
    count: 1,
    mediaType: ["image"],
    success: (res) => {
      const tempFilePath = res.tempFiles[0].tempFilePath;
      uni.uploadFile({
        url: VITE_UPLOAD_BASEURL,
        name: "file",
        filePath: tempFilePath,
        header: {
          "content-type": "multipart/form-data",
          "Blade-Auth": "Bearer " + userInfo.value.token,
        },
        success: async (res: any) => {
          if (res.statusCode >= 200 && res.statusCode < 300) {
            const data = JSON.parse(res.data);
            if (data.code !== 200) {
              uni.showToast({
                icon: "none",
                title: data.msg || "请求错误",
              });
              if (data.code === 401) {
                uni.clearStorageSync();
                uni.navigateTo({ url: "/pages/login/index" });
              }
            } else {
              const res: any = await wxUserUpdate({
                id: userInfo.value.account,
                [val]: data.data.link,
              });
              userStore.setUserInfo({
                ...userInfo.value,
              [val]: data.data.link,
              });
              toast.show("操作成功");
            }
          } else {
            uni.showToast({
              icon: "none",
              title: "请求错误",
            });
          }
        },
        fail: (err) => {
          uni.showToast({
            icon: "none",
            title: '图片上传接口调用失败',
          });
        },
      });
    }
  });
}
</script>

<style lang="scss" scoped>
.my-issue {
  padding-top: 10rpx;
  .my-issue-btn {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
  }
  .my-issue-item {
    display: block;
    margin-top: 20rpx;
  }
  .my-issue-icon {
    margin-right: 10rpx;
    font-size: 28rpx;
  }
  .issue-img {
    width: 80rpx;
    height: 80rpx;
  }
}
.my-nick-pop {
  padding: 20rpx 28rpx;
  .my-nick-pop-title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 600rpx;
    padding-top: 50rpx;
  }
  .my-nick-pop-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 40rpx;
    input {
      flex: 1;
      height: 80rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      color: #555;
      border: 2rpx #eee solid;
      border-radius: 10rpx;
    }
  }
  .my-nick-pop-btn {
    display: flex;
    flex-direction: row;
    border-top-color: #f5f5f5;
    border-top-style: solid;
    border-top-width: 2rpx;
    .my-nick-pop-btn-sure {
      color: #2595f3;
      border-left: 2rpx solid #eee;
    }
    button {
      flex: 1;
      background: transparent;
    }
  }
}
</style>
